<template>
  <div>
    <el-container>
      <el-header height="80px" class="header">
      <Header/>
      </el-header>
      <el-container class="aside_main">
        <el-aside width="200px"  style="margin-right: 10px; padding: 5px; overflow-y: auto; height: 1100px">
          <div style="position: relative; display: flex; flex-direction: column; align-items: flex-end;">
            <div  style="display: flex; flex-wrap: wrap; position: absolute;padding-right: 5px">


              <el-menu id="menu_aside"  @select="categorySelect"  style="border: none;" >
                <el-menu-item v-for="(category,index) in categoriesArr"  :key="index" :index="String(index)" style="font-size: 16px">{{category.name}}</el-menu-item>
              </el-menu>


            </div>
            <div style="margin-top: 600px; padding-right: 10px; top: 650px;width: 150px" >
              <el-row>

                <el-button style="margin-bottom: 10px;width: 150px;height: 48px ;
                border-radius: 30px; font-size: 18px;font-family: 'Microsoft YaHei';color: black;box-shadow: none;border: none;cursor: pointer;font-weight: bold; outline: none"
                           class="custom-button" @click="toPostArticle">
                  <i class="el-icon-circle-plus-outline"></i> 发布
                </el-button>
                <br>
                <button  style="margin-bottom: 10px;background-color:#e53030;width: 150px;height: 48px ;
                border-radius: 30px; font-size: 18px;font-family: 'Microsoft YaHei';color: white;box-shadow: none;border: none;cursor: pointer;font-weight: bold ; outline: none"
                         class="custom-button" @click="toUserLogin">登录</button>
              </el-row>
            </div>
          </div>
          <el-button icon="el-icon-info"
                     plain
                     @click="open3" style="margin-left: 0;margin-top: 96px;border: none">
          </el-button>

        </el-aside>


        <el-main style="padding: 5px;margin-left:-10px;">
          <div>
            <template>
              <div class="infinite-list-demo">
                <ul class="infinite-list" v-infinite-scroll="load">

                  <el-card v-for="(i,index) in card" :key="index" class="infinite-list-item" style="background-color: white;box-shadow: none;border: none;padding: 0;">
                    <a style="color: #333;text-decoration: none"
                       :href="'/frontEnd/articleDetail?id='+i.id">


                      <img :src="i.imagesUrl" style="width: 290px;height: 260px;display: inline-block;">

                      <div style="height: 80px; margin: 0;border: 0px">
                        <p>{{i.title}}</p>
                        <el-row style="margin-bottom: 10px">
                          <el-col :span="4">
                            <el-avatar size="lager" :src="i.iconUrl"></el-avatar>
                          </el-col>
                          <el-col :span="20" style="margin-bottom: 10px">
                            <p style="display: inline-block;font-size: 22px;vertical-align: middle;margin-top: 5px">{{i.username}}</p>
                          </el-col>
                        </el-row>
                      </div>

                      <div style="position: relative; bottom: 15px; ">
                        <img src="http://localhost:8008/imgs/liked.jpg" height="35px" width="35px" style="vertical-align: middle;">
                        <span style="margin-left: 5px; display: inline-block; vertical-align: middle; font-size: 27px;">{{i.liked}}</span>
                        <img src="http://localhost:8008/imgs/collect.jpg" height="50px" width="50px" style="vertical-align: middle;">
                        <span style="margin-left: 1px; display: inline-block; vertical-align: middle; font-size: 27px;">{{i.collect}}</span>
                        <img src="http://localhost:8008/imgs/comment.jpg" height="30px" width="30px" style="vertical-align: middle;margin-left:10px">
                        <span style="margin-left: 5px; display: inline-block; vertical-align: middle; font-size: 27px;">{{i.comments}}</span>
                      </div>


                    </a>
                  </el-card>

                </ul>
              </div>
            </template>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import Header from '@/views/common/Header';
export default {
  components: {Header},
  data: function () {
    return {
      user: localStorage.currentUserId ? JSON.parse(localStorage.currentUserId) : null,
      card:[],
      tabPosition: 'left',
      count: 0,
      articleArr: [],
      categoriesArr: [],
      icon: require("@/assets/images/profile.jpg")
    }
  },
  methods: {
    toUserReg() {
      this.$router.push("/frontEnd/userReg")
    },
    toUserLogin() {
      this.$router.push("/frontEnd/userLogin")
    },
    toPostArticle() {
      this.$router.push("/frontEnd/postArticle")
    },
    load() {
      this.count += 4
    },

    open3() {
      const h = this.$createElement;

      this.$notify({
        message: h('i', { style: 'color: teal'}, 'Copyright © 2023 doudou.保留所有权利。   隐私政策 | 使用条款 | 销售政策 | 法律信息 | 网站地图 ' +
            '苏ICP备20230610号   营业执照   无线电发射设备销售备案编号20230610105453'),
        position: 'bottom-left'
      });
    },
    //发请求获取某个分类下的数据
    categorySelect(key){
      console.log(key);
      this.axios.get("http://localhost:9090/v1/blogs/"+ key +"/index").then((response)=>{
        if (response.data.code==200){
          this.card=response.data.data;
        }
      })
    },
    logout(){
      if (confirm("您确认退出登录吗?")){
        //发请求退出登录
        this.axios.get("http://localhost:9090/v1/users/logout").then(function () {
          localStorage.clear();//清空登录成功时保存的数据
          location.href="/frontEnd/homePage";
        })
      }
    },
  },

  mounted: function () {
    this.axios.get("http://localhost:9090/v1/blogs/0/index").then( (response)=> {
      if (response.data.code==200){
        this.card=response.data.data;
      }
    })
    this.axios.get("http://localhost:9090/v1/blogs/allCategories").then((response)=>{
      if (response.data.code==200){
        console.log(response.data.data);
        this.categoriesArr=response.data.data;
      }
    })
  }
}
</script>

<style>
.center {
  width: 1200px;
  margin: 0 auto;
}
.custom-button:hover  {
  background-color: white;
  color: black;
}


body{
  overflow-y: hidden;
}
.infinite-list {
  flex-wrap: wrap; /* 让数据项自适应换行 */
  justify-content: flex-start;
  align-items: center;
  height: 800px;
  width: 1450px;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 商品分成4列 */
  gap: 32px; /* 列与列之间空隙为15像素 */
}

.infinite-list-item {


  background-color: #c3c8c8;
  height: 430px;
  width: 100%; /* 设置为百分比 */

}

ul {
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer and Edge */
}

/* 针对 Chrome、Safari 和 Opera */
ul::-webkit-scrollbar {
  display: none;
}

.center {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-bar {
  margin-top: 15px;
  height: 40px;
  line-height: 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.icon-wrapper {
  position: relative;
  top: 12px;
}

#menu_aside{
  display: flex;
  flex-direction: column;
  line-height: 5px;
}
#menu_aside .el-menu-item:hover {
  background-color: white; /* 鼠标悬停时的背景色为白色 */
  font-weight: bold; /* 字体加粗 */
  color: black; /* 文字颜色变色，这里设置为黑色 */
}

.el-menu-item.is-active{background: #FFFFFF !important;}

</style>